<template>
	<view class="container">
		<view class="title">注册页面</view>
		<!-- 用户名输入框 -->
		<input v-model="userName" placeholder="请输入用户名" class="input-field" />
		<!-- 密码输入框 -->
		<input v-model="password" type="password" placeholder="请输入密码" class="input-field" />
		<!-- 昵称输入框 -->
		<input v-model="nickName" placeholder="请输入昵称" class="input-field" />
		<!-- 性别选择 -->
		<picker v-model="gender" :range="genderOptions" mode="selector" class="input-field">
			<view class="picker">
				性别: {{ genderOptions[gender] }}
			</view>
		</picker>
		<!-- 生日选择 -->
		<picker v-model="birthday" mode="date" start="1900-01-01" end="2099-12-31" class="input-field" @change="onDateChange">
			<view class="picker">
				生日: {{ birthday }}
			</view>
		</picker>
		<!-- 年龄输入框 -->
		<input v-model="age" placeholder="请输入年龄" class="input-field" type="number" />
		<!-- 头像地址输入框 -->
		<input v-model="avatar" placeholder="请输入头像地址" class="input-field" />
		<!-- 楼栋信息输入框 -->
		<input v-model="area" placeholder="请输入楼栋信息" class="input-field" />
		<!-- 详细地址门派信息输入框 -->
		<input v-model="address" placeholder="请输入详细地址门派信息" class="input-field" />
		<!-- 注册按钮 -->
		<button @click="handleRegister" class="register-button">注册</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		zhuce,userInfo
	} from '../../api/user.js';



	// 定义响应式变量来存储用户名和密码
	const userName = ref('');
	const password = ref('');
	const nickName = ref('');
	const gender = ref(0);
	const genderOptions = ref(['男', '女']);
	const birthday = ref('');
	const age = ref('');
	const avatar = ref('');
	const area = ref('');
	const address = ref('');

	// 注册接口
	async function reg(userInfo) {
		let r2 = await zhuce(userInfo);
		console.log(r2.data);
		// 清空输入框
		userName.value = "";
		password.value = "";
		nickName.value = "";
		gender.value = 0;
		birthday.value = "";
		age.value = "";
		avatar.value = "";
		area.value = "";
		address.value = "";
		
		// 注册成功后可以跳转到登录页面或其他页面
		uni.navigateTo({
		    url: '/pages/login/login'
		});

	}
	const onDateChange = (e) => {
	  // 确保正确更新 birthday 的值
	  birthday.value = e.detail.value;
	};

	// 处理注册逻辑的函数
	const handleRegister = async () => {
		// 简单的输入验证，检查用户名和密码是否为空
		if (!userName.value || !password.value) {
			uni.showToast({
				title: '用户名和密码不能为空',
				icon: 'none'
			});
			return;
		}

		// 构造包含所有信息的用户对象
		const userInfo = {
			userName: userName.value,
			password: password.value,
			nickName: nickName.value,
			gender: genderOptions.value[gender.value],
			birthday: birthday.value,
			age: age.value,
			avatar: avatar.value,
			area: area.value,
			address: address.value
		};
		reg(userInfo)

	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
	}

	.input-field {
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 20px;
	}

	.register-button {
		background-color: #007aff;
		color: white;
		padding: 10px;
		border-radius: 5px;
		text-align: center;
	}

	.picker {
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 20px;
	}
</style>